<template>
  <div class="search-container">
    <!-- 搜索区域 -->
    <van-search
      v-model="value"
      @search="onSearch"
      show-action
      shape="round"
      @cancel="$router.back()"
      placeholder="请输入商品名称"
    />

    <div class="box">
      <div class="item" v-if="historyData.length > 0">
        <div class="header">
          <span>搜索历史</span>
          <van-icon name="delete-o" @click="clearHistory" />
        </div>
        <div class="content">
          <span
            class="item"
            v-for="item in historyData"
            :key="item"
            @click="$router.push('/searchresult?value=' + item)"
            >{{ item }}</span
          >
        </div>
        <van-divider />
      </div>

      <div class="item">
        <div class="header">
          <span>热门搜索</span>

          <van-icon :name="isEyeOpen ? 'eye-o' : 'closed-eye'" @click="isEyeOpen = !isEyeOpen" />
        </div>
        <div class="content">
          <template v-if="isEyeOpen">
            <span v-for="item in hotsData" :key="item" @click="$router.push('/searchresult?value=' + item)">{{
              item
            }}</span>
          </template>
          <div v-else class="emptyTip">已隐藏热门搜索</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      isEyeOpen: true,
      historyData: JSON.parse(localStorage.getItem('historyData') || '[]'),
      hotsData: ['su7', '长城炮'],
    }
  },
  methods: {
    async onSearch() {
      if (!this.value) {
        this.$toast('请输入商品名称')
        return
      }
      // 判断是否有重复的关键字
      let index = this.historyData.indexOf(this.value)
      if (index > -1) {
        // 删除原来的关键字
        this.historyData.splice(index, 1)
        await this.historyData.unshift(this.value)
        // 跳转到搜索结果页面
        this.$router.push('/searchresult?value=' + this.value)
        return
      }
      if (this.historyData.length === 10) {
        // 删尾元素
        this.historyData.pop()
      }

      await this.historyData.unshift(this.value)
      let value = this.value
      this.value = ''
      // 跳转到搜索结果页面
      this.$router.push('/searchresult?value=' + value)
    },
    clearHistory() {
      this.historyData = []
    },
  },
  watch: {
    historyData: {
      handler(newV) {
        localStorage.setItem('historyData', JSON.stringify(newV))
      },
      deep: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.search-container {
  // min-height: 50vh;
  padding-bottom: 50px;
  background-color: #fff;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;

  .box {
    padding: 4px;

    .item {
      margin-top: 4px;

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
        font-size: 16px;

        span:first-child {
          font-weight: bold;
          color: #3b3333;
        }
      }

      .content {
        position: relative;
        display: flex;
        flex-wrap: wrap;

        .item {
          padding: 4px 10px;
          margin-top: 10px;
          margin-right: 10px;
          font-size: 14px;
          color: #5e5757;
          background-color: #f3f5f6;
          border-radius: 8px;
        }

        .emptyTip {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate3d(-50%, 50%, 0);
        }
      }
    }
  }
}
</style>
